import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux'
import _ from 'lodash'

import { Table, Icon, Tag, Form,  Button, message, Tabs} from 'antd';
const TabPane = Tabs.TabPane;
import { fetchVersionList,API_URL } from '../../store/actions';
import SearchInput from '../../components/search-input'

class AppList extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      user: this.props.user,
      data: []
    };
  }
  render(){
    const rowSelection = {};
    const columns = [{
      title: '名称',
      dataIndex: 'name'
    }, {
      title: '版本号',
      dataIndex: 'version'
    }, {
      title: '发布时间',
      dataIndex: 'buildtime'
    }, {
      title: '备注',
      dataIndex: 'release_notes'
    }, {
      title: '下载APP',
      dataIndex: 'url',
      render(text){
        return (<a href={text}><Icon type="download" />下载</a>)
      },
      width:160
    }];
    const pagination = {
      total: this.state.data.length,
      showSizeChanger: true,
      onShowSizeChange(current, pageSize) {},
      onChange(current) {}
    };
    return (
      <div>
        <Table
          pagination={pagination}
          columns={columns}
          rowSelection={rowSelection}
          dataSource={this.props.data}
        />
      </div>
    )
  }
}
class _AppManage extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      active:'1',
      defaultActiveKey:'1',
      iosData:[]
    };
    this.changeTag = this.changeTag.bind(this)
  }
  _fetchList(type){
    const _this = this,
      opts = {
        accessToken:_this.props.user.accessToken,
        type:type
      }
    _this.props.dispatch(fetchVersionList(opts,function(res){
      if(type == 'ios'){
        _this.setState({
          iosData:res.content.data
        })
      }else if(type == 'android'){
        const _data = _.map(res.content.data,o=>{
          const newUrl = API_URL.replace(/\/$/,'')+o.url
          o.url = newUrl
          return o
        });
        _this.setState({
          androidData:_data
        })
      }else{
        return false
      }
    }));
  }
  componentWillMount(){
    this._fetchList('ios');
    this._fetchList('android')
  }
  changeTag(e){
    this.setState({
      active:e
    })
  }
  static contextTypes = {
    router: React.PropTypes.object
  }
  publicApp(){
    this.context.router.push('/app-public')
  }
  render(){
    return (
      <div>
        <div style={{overflow: 'hidden', marginBottom: '10px', padding: '10px 0'}}>
          <div style={{float:'left'}}>
            <Button icon="cloud-upload-o" type="primary" size="large" onClick={this.publicApp.bind(this)}>发布新版本</Button>
          </div>
          {/*<div style={{float:'right'}}>
            <SearchInput style={{ width: 200 }} placeholder='请输入关键字查询' />
          </div>*/}
        </div>
        <Tabs defaultActiveKey="1" >
          <TabPane tab={<span><Icon type="apple" />iOS</span>} key="1">
            <AppList data={this.state.iosData} user={this.props.user} dispatch={this.props.dispatch} />
          </TabPane>
          <TabPane tab={<span><Icon type="android" />Android</span>} key="2">
            <AppList data={this.state.androidData} user={this.props.user} dispatch={this.props.dispatch} />
          </TabPane>
        </Tabs>
      </div>
    )
  }
}
let AppManage;
export default AppManage = connect((state)=>{
  const {user} = state.rootReducer;
  return {user}
})(_AppManage)

